{% extends "part/part_base.html" %}
{% load static %}
{% load i18n %}
{% load inventree_extras %}
{% load crispy_forms_tags %}

{% block sidebar %}
{% include 'part/part_sidebar.html' %}
{% endblock sidebar %}

{% block breadcrumb_tree %}
<div id="breadcrumb-tree"></div>
{% endblock breadcrumb_tree %}

{% block page_content %}

<div class='panel panel-hidden' id='panel-part-stock'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Stock" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.stock.add and not part.virtual %}
                <button type='button' class='btn btn-success' id='new-stock-item' title='{% trans "Create new stock item" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Stock Item" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "stock_table.html" %}
    </div>
</div>

{% settings_value 'DISPLAY_SCHEDULE_TAB' user=request.user as show_scheduling %}
{% if show_scheduling %}
<div class='panel panel-hidden' id='panel-scheduling'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Scheduling" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class='btn btn-primary' type='button' id='btn-schedule-reload' title='{% trans "Refresh scheduling data" %}'>
                    <span class='fas fa-redo-alt'></span> {% trans "Refresh" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "part/part_scheduling.html" %}
    </div>
</div>
{% endif %}

{% settings_value 'STOCKTAKE_ENABLE' as stocktake_enable %}
{% settings_value 'DISPLAY_STOCKTAKE_TAB' user=request.user as show_stocktake %}
{% if stocktake_enable and show_stocktake %}
<div class='panel panel-hidden' id='panel-stocktake'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Stocktake" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.stocktake.add %}
                <button class='btn btn-success' type='button' id='btn-stocktake' title='{% trans "Add stocktake information" %}'>
                    <span class='fas fa-clipboard-check'></span> {% trans "Stocktake" %}
                </button>
                {% endif %}
                <!-- TODO: Buttons -->
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "part/part_stocktake.html" %}
    </div>
</div>
{% endif %}

<div class='panel panel-hidden' id='panel-test-templates'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Test Templates" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <div class='btn-group' role='group'>
                    <button type='button' class='btn btn-success' id='add-test-template'>
                        <span class='fas fa-plus-circle'></span> {% trans "Add Test Template" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='test-button-toolbar'>
            {% include "filter_list.html" with id="parttests" %}
        </div>

        <table class='table table-striped table-condensed' data-toolbar='#test-button-toolbar' id='test-template-table'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-purchase-orders'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Purchase Orders" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class='btn btn-primary' type='button' id='part-order2' title='{% trans "Order part" %}'>
                    <span class='fas fa-shopping-cart'></span> {% trans "Order Part" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='po-button-bar'>
            {% include "filter_list.html" with id="partpurchaseorders" %}
        </div>

        <table class='table table-striped table-condensed po-table' id='purchase-order-table' data-toolbar='#po-button-bar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-sales-orders'>
    <div class='panel-heading'>
        <h4>{% trans "Sales Orders" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='so-button-bar'>
            {% include "filter_list.html" with id="salesorder" %}
        </div>

        <table class='table table-striped table-condensed po-table' id='sales-order-table' data-toolbar='#so-button-bar'>
        </table>
    </div>

    <div class='panel-heading'>
        <h4>{% trans "Sales Order Allocations" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='sales-order-allocation-button-toolbar'>
            {% include "filter_list.html" with id="salesorderallocation" %}
        </div>
        <table class='table table-striped table-condensed' id='sales-order-allocation-table' data-toolbar='#sales-order-allocation-button-toolbar'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-pricing'>
    {% include "part/prices.html" %}
</div>

<div class='panel panel-hidden' id='panel-part-notes'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Notes" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "notes_buttons.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <textarea id='part-notes'></textarea>
    </div>
</div>

<div class='panel panel-hidden' id='panel-variants'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Variants" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if part.is_template and part.active %}
                <button class='btn btn-success' id='new-variant' title='{% trans "Create new variant" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Variant" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='variant-button-toolbar'>
            {% include "filter_list.html" with id="variants" %}
        </div>

        <table class='table table-striped table-condensed' id='variants-table' data-toolbar='#variant-button-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-part-parameters'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Parameters" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.part.add %}
                <button title='{% trans "Add new parameter" %}' class='btn btn-success' id='param-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Parameter" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='param-button-toolbar'>
            {% include "filter_list.html" with id="parameters" %}
        </div>
        <table id='parameter-table' class='table table-condensed table-striped' data-toolbar="#param-button-toolbar"></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-part-attachments'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Attachments" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% include "attachment_button.html" %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "attachment_table.html" %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-related-parts'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Related Parts" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if roles.part.change %}
                <button class='btn btn-success' type='button' id='add-related-part' title='{% trans "Add Related" %}'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add Related" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='related-button-toolbar'>
            {% include "filter_list.html" with id="related" %}
        </div>

        <table id='related-parts-table' class='table table-striped table-condensed' data-toolbar='#related-button-toolbar'></table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-bom'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Bill of Materials" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <!-- Export menu -->
                <div class='btn-group'>
                    <button id='export-options' title='{% trans "Export actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
                        <span class='fas fa-download'></span> <span class='caret'></span>
                    </button>
                    <ul class='dropdown-menu' role='menu'>
                        <li><a class='dropdown-item' href='#' id='download-bom'><span class='fas fa-file-download'></span> {% trans "Export BOM" %}</a></li>
                        {% if report_enabled %}
                        <li><a class='dropdown-item' href='#' id='print-bom-report'><span class='fas fa-file-pdf'></span> {% trans "Print BOM Report" %}</a></li>
                        {% endif %}
                    </ul>
                </div>
                <!-- Actions menu -->
                <div class='btn-group'>
                    <button id='bom-actions' title='{% trans "BOM actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
                        <span class='fas fa-tools'></span> <span class='caret'></span>
                    </button>
                    <ul class='dropdown-menu' role='menu'>
                        <li><a class='dropdown-item' href='#' id='bom-upload'><span class='fas fa-file-upload'></span> {% trans "Upload BOM" %}</a></li>
                        <li><a class='dropdown-item' href='#' id='bom-duplicate'><span class='fas fa-clone'></span> {% trans "Copy BOM" %}</a></li>
                        <li><a class='dropdown-item' href='#' id='validate-bom'><span class='fas fa-clipboard-check icon-green'></span> {% trans "Validate BOM" %}</a></li>
                    </ul>
                </div>

                {% if roles.part.change %}
                <button class='btn btn-success' type='button' title='{% trans "Add BOM Item" %}' id='bom-item-new'>
                    <span class='fas fa-plus-circle'></span> {% trans "Add BOM Item" %}
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        {% include "part/bom.html" with part=part %}
    </div>
</div>

<div class='panel panel-hidden' id='panel-used-in'>
    <div class='panel-heading'>
        <h4>{% trans "Assemblies" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='assembly-button-toolbar'>
            {% include "filter_list.html" with id="usedin" %}
        </div>

        <table class="table table-striped table-condensed" id='used-table' data-toolbar='#assembly-button-toolbar'>
        </table>
    </div>
</div>

<div class='panel panel-hidden' id='panel-build-orders'>
    {% if part.assembly %}
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Builds" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                {% if part.active %}
                {% if roles.build.add %}
                <button class="btn btn-success" id='start-build'>
                    <span class='fas fa-tools'></span> {% trans "New Build Order" %}
                </button>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='build-button-toolbar'>
            {% include "filter_list.html" with id="build" %}
        </div>

        <table class='table table-striped table-condensed' data-toolbar='#build-button-toolbar' id='build-table'>
        </table>
    </div>
    {% endif %}

    {% if part.component %}
    <div class='panel-heading'>
        <h4>{% trans "Build Order Allocations" %}</h4>
    </div>
    <div class='panel-content'>
        <div id='build-allocation-button-toolbar'>
            {% include "filter_list.html" with id="buildorderallocation" %}
        </div>
        <table class='table table-striped table-condensed' id='build-order-allocation-table' data-toolbar='#build-allocation-button-toolbar'></table>
    </div>
    {% endif %}
</div>

<div class='panel panel-hidden' id='panel-suppliers'>
    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Suppliers" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class="btn btn-success" id='supplier-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Supplier Part" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div id='supplier-button-toolbar'>
            {% include "filter_list.html" with id="supplier-part" %}
        </div>

        <table class="table table-striped table-condensed" id='supplier-part-table' data-toolbar='#supplier-button-toolbar'>
        </table>
    </div>

    <div class='panel-heading'>
        <div class='d-flex flex-wrap'>
            <h4>{% trans "Part Manufacturers" %}</h4>
            {% include "spacer.html" %}
            <div class='btn-group' role='group'>
                <button class="btn btn-success" id='manufacturer-create'>
                    <span class='fas fa-plus-circle'></span> {% trans "New Manufacturer Part" %}
                </button>
            </div>
        </div>
    </div>
    <div class='panel-content'>
        <div class='panel-content'>
            <div id='manufacturer-button-toolbar'>
                {% include "filter_list.html" with id="manufacturer-part" %}
            </div>
            <table class='table table-condensed table-striped' id='manufacturer-part-table' data-toolbar='#manufacturer-button-toolbar'></table>
        </div>
    </div>
</div>

{% endblock page_content %}

{% block js_load %}
{{ block.super }}
{% endblock js_load %}

{% block js_ready %}
    {{ block.super }}

    // Load the "notes" tab
    onPanelLoad('part-notes', function() {

        setupNotesField(
            'part-notes',
            '{% url "api-part-detail" part.pk %}',
            {
                editable: {% js_bool roles.part.change %},
            }
        );
    });

    // Load the "scheduling" tab
    onPanelLoad('scheduling', function() {
        var chart = loadPartSchedulingChart('part-schedule-chart', {{ part.pk }});

        $('#btn-schedule-reload').click(function() {

            if (chart != null) {
                chart.destroy();
            }

            chart = loadPartSchedulingChart('part-schedule-chart', {{ part.pk }});
        });
    });

    // Load the "stocktake" tab
    onPanelLoad('stocktake', function() {
        loadPartStocktakeTable({{ part.pk }}, {
            allow_edit: {% js_bool roles.stocktake.change %},
            allow_delete: {% js_bool roles.stocktake.delete %},
        });

        {% if roles.stocktake.add %}
        $('#btn-stocktake').click(function() {
            generateStocktakeReport({
                part: {
                    value: {{ part.pk }}
                },
                location: {
                    tree_picker: {
                        url: '{% url "api-location-tree" %}',
                        default_icon: global_settings.STOCK_LOCATION_DEFAULT_ICON,
                    },
                },
                generate_report: {
                    value: false,
                },
                update_parts: {},
            });
        });
        {% endif %}
    });

    // Load the "suppliers" tab
    onPanelLoad('suppliers', function() {

        function reloadSupplierPartTable() {
            $('#supplier-part-table').bootstrapTable('refresh');
        }

        $('#supplier-create').click(function () {

            createSupplierPart({
                part: {{ part.pk }},
                onSuccess: reloadSupplierPartTable,
            });
        });

        $("#supplier-part-delete").click(function() {

            var selections = getTableData('#supplier-part-table');

            deleteSupplierParts(selections, {
                success: reloadSupplierPartTable,
            });
        });

        loadSupplierPartTable(
            "#supplier-part-table",
            "{% url 'api-supplier-part-list' %}",
            {
                params: {
                    part: {{ part.id }},
                    part_detail: true,
                    supplier_detail: true,
                    manufacturer_detail: true,
                },
            }
        );

        loadManufacturerPartTable(
            '#manufacturer-part-table',
            "{% url 'api-manufacturer-part-list' %}",
            {
                params: {
                    part: {{ part.id }},
                    part_detail: true,
                    manufacturer_detail: true,
                },
            }
        );

        $("#manufacturer-part-delete").click(function() {

            var selectionss = getTableData('#manufacturer-part-table');

            deleteManufacturerParts(selections, {
                success: function() {
                    $("#manufacturer-part-table").bootstrapTable('refresh');
                }
            });
        });

        $('#manufacturer-create').click(function () {

            createManufacturerPart({
                part: {{ part.pk }},
                onSuccess: function() {
                    $("#manufacturer-part-table").bootstrapTable('refresh');
                }
            });
        });
    });

    // Load the "builds" tab
    onPanelLoad("build-orders", function() {

        {% if part.assembly %}
        $("#start-build").click(function() {
            newBuildOrder({
                part: {{ part.pk }},
            });
        });

        loadBuildTable($("#build-table"), {
            locale: '{{ request.LANGUAGE_CODE }}',
            params: {
                part: {{ part.id }},
            }
        });
        {% endif %}

        {% if part.component %}
        loadBuildOrderAllocationTable("#build-order-allocation-table", {
            params: {
                part: {{ part.id }},
            }
        });
        {% endif %}

    });

    // Load the "sales orders" tab
    onPanelLoad("sales-orders", function() {
        loadSalesOrderAllocationTable("#sales-order-allocation-table", {
            params: {
                part: {{ part.id }},
            }
        });
    });

    // Load the "used in" tab
    onPanelLoad("used-in", function() {

        loadUsedInTable(
            '#used-table',
            {{ part.pk }},
        );
    });

    // Load the "BOM" tab
    onPanelLoad("bom", function() {
        // Load the BOM table data
        loadBomTable($("#bom-table"), {
            {% if roles.part.change %}
            editable: true,
            {% else %}
            editable: false,
            {% endif %}
            bom_url: "{% url 'api-bom-list' %}",
            part_url: "{% url 'api-part-list' %}",
            parent_id: {{ part.id }} ,
            sub_part_detail: true,
        });

        $('#bom-item-delete').click(function() {

            // Get a list of the selected BOM items
            var rows = getTableData('#bom-table');

            deleteBomItems(rows, {
                success: function() {
                    $('#bom-table').bootstrapTable('refresh');
                }
            });
        });

        $('#bom-upload').click(function() {
            location.href = "{% url 'upload-bom' part.id %}";
        });

        $('#bom-duplicate').click(function() {

            duplicateBom({{ part.pk }}, {
                success: function(response) {
                    $('#bom-table').bootstrapTable('refresh');
                }
            });
        });

        $("[id^=bom-item-new]").click(function () {
            addBomItem({{ part.pk }}, {
                onSuccess: function() {
                    $('#bom-table').bootstrapTable('refresh');
                }
            });
        });

        $("#validate-bom").click(function() {

            validateBom({{ part.id }}, {
                reload: true
            });
        });

        $("#download-bom").click(function () {
            exportBom({{ part.id }});
        });

        {% if report_enabled %}
        $("#print-bom-report").click(function() {
            printReports({
                items: [{{ part.pk }}],
                key: 'part',
                url: '{% url "api-bom-report-list" %}'
            });
        });
        {% endif %}
    });

    // Load the "related parts" tab
    onPanelLoad("related-parts", function() {

        loadRelatedPartsTable(
            "#related-parts-table",
            {{ part.pk }}
        );

        $("#add-related-part").click(function() {

            constructForm('{% url "api-part-related-list" %}', {
                method: 'POST',
                fields: {
                    part_1: {
                        hidden: true,
                        value: {{ part.pk }},
                    },
                    part_2: {
                        label: '{% trans "Related Part" %}',
                        filters: {
                            exclude_id: {{ part.pk }},
                            exclude_related: {{ part.pk }},
                        }
                    }
                },
                focus: 'part_2',
                title: '{% trans "Add Related Part" %}',
                refreshTable: '#related-parts-table',
            });
        });

        $('.delete-related-part').click(function() {
            var button = $(this);

            launchModalForm(button.attr('url'), {
                reload: true,
            });
        });
    });

    // Load the "variants" tab
    onPanelLoad("variants", function() {
        loadPartVariantTable($('#variants-table'), {{ part.pk }});

        $('#new-variant').click(function() {

            duplicatePart(
                {{ part.pk }},
                {
                    variant: true,
                }
            );
        });
    });

    onPanelLoad("purchase-orders", function() {
        loadPartPurchaseOrderTable(
            "#purchase-order-table",
            {{ part.pk }},
        );
    });

    onPanelLoad("sales-orders", function() {
        loadSalesOrderTable($("#sales-order-table"), {
            url: "{% url 'api-so-list' %}",
            params: {
                part: {{ part.id }},
            },
        });
    });

    $("#part-order2").click(function() {
        inventreeGet(
            '{% url "api-part-detail" part.pk %}',
            {},
            {
                success: function(part) {
                    orderParts(
                        [part],
                        {
                            onSuccess: function() {
                                $("#purchase-order-table").bootstrapTable('refresh');
                            }
                        }
                    );
                }
            }
        );
    });

    onPanelLoad("test-templates", function() {

        // Load test template table
        loadPartTestTemplateTable(
            $("#test-template-table"),
            {
                part: {{ part.pk }},
                params: {
                    part: {{ part.pk }},
                }
            }
        );

        // Callback for "add test template" button
        $("#add-test-template").click(function() {

            constructForm('{% url "api-part-test-template-list" %}', {
                method: 'POST',
                fields: partTestTemplateFields({
                    part: {{ part.pk }}
                }),
                title: '{% trans "Add Test Result Template" %}',
                refreshTable: '#test-template-table',
            });
        });
    });

    onPanelLoad("part-stock", function() {
        $('#new-stock-item').click(function () {
            createNewStockItem({
                data: {
                    part: {{ part.id }},
                    {% if part.default_location %}
                    location: {{ part.default_location.pk }},
                    {% endif %}
                }
            });
        });

        loadStockTable($("#stock-table"), {
            params: {
                part: {{ part.id }},
                location_detail: true,
                part_detail: true,
                supplier_part_detail: true,
            },
        });

        $('#item-create').click(function () {
            createNewStockItem({
                data: {
                    part: {{ part.id }},
                }
            });
        });
    });

    onPanelLoad("part-parameters", function() {
        loadPartParameterTable(
            '#parameter-table',
            {
                params: {
                    part: {{ part.pk }},
                }
            }
        );

        {% if roles.part.add %}
        $('#param-create').click(function() {
            createPartParameter({{ part.pk }}, {
                refreshTable: '#parameter-table'
            });
        });
        {% endif %}
    });

    onPanelLoad("part-attachments", function() {
        loadAttachmentTable('{% url "api-part-attachment-list" %}', {
            filters: {
                part: {{ part.pk }},
            },
            fields: {
                part: {
                    value: {{ part.pk }},
                    hidden: true
                }
            }
        });
    });

    onPanelLoad('pricing', function() {
        {% include "part/pricing_javascript.html" %}
    });

    enableSidebar('part');

    enableBreadcrumbTree({
        label: 'part',
        url: '{% url "api-part-category-tree" %}',
        {% if part.category %}
        selected: {{ part.category.pk }},
        {% endif %}
        processNode: function(node) {
            node.text = node.name;
            node.href = `/part/category/${node.pk}/`;

            return node;
        }
    });

{% endblock js_ready %}
